<template>
	<view class="content">
		<TopLogo></TopLogo>
		
		<view class="form-content-wrap">
			<view class="content-box">
				<view class="form-content">
					<block>
						<view class="pr">
							<input type="number" maxlength="11" name="accounts" class="form-item"
							placeholder="请输入手机号" confirm-type="search"
								@confirm="handleInput"/>
						</view>
						<view class="menu-box">
							<view class="m-row menu-item" @tap="openScan()">
								<view>
									签到扫码
								</view>
							</view>
						</view>
					</block>
					<!-- <img src="../../static/tv.png" class="tv-icon"></img>
					<img src="../../static/good-house.png" class="good-house-icon"></img> -->
				</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	import TopLogo from '@/components/topLogo/index.vue';
	import h5ScanCode from 'h5-scan-code'
	export default {
		components: {
			
			TopLogo
		},
		data() {
			return {
				scanType: '1', // 1-4 
				loginType: '1' // 1签到扫码  2 分论坛扫码 3 公开课扫码
			}
		},
		onLoad(props) {
			// if (props.type) {
			// 	this.loginType = props.type || 1
			// 	this.scanType = props.meetType || 1
			// }
		},

		methods: {
			handleInput(e) {
				if (e.target.value.length == 11) {
					let api = `https://dy.btvs.cn/api/basic/guest/sigin/${e.target.value}`
					uni.request({
						url: api,
						method: 'PUT',
						dataType: 'json',
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: (res) => {
							console.log('===',res)
							uni.hideLoading();
							if (res.data.code == 200) {
								uni.showToast({
									title: '签到成功',
									icon: "success"
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/userInfo/userInfo?uId=' + res.data.data.id
									})
								},1000)

							} else if (res.data.code == 5003) {
								// 错误码 5003 该二维码已签到
								// uni.navigateTo({
								// 	url: '/pages/noRegister/index'
								// })
								uni.showToast({
									title: '已签到',
									icon: "none"
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "error"
								})

								if (res.data.code == 401) {
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/hwLogin/index'
										})
									}, 1500)
								}
							}
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast({
								title: '网络开小差了哦',
								icon: "error"
							})
						},
					});
				} else {
					uni.showToast({
						title: '请输入正确的手机号！',
						icon: "none"
					})
				}
			},
			openScan() {
				h5ScanCode({
					// 扫码类型 (目前仅支持 'qrCode')
					scanType: 'qrCode',
					// 摄像头方向 ( 'back' | 'front' )
					facingMode: 'back',
					// 是否允许从相册选择 (默认 true)
					allowOpenAlbum: true,
					// 是否允许开启闪光灯 (默认 true)
					allowOpenTorch: true,
					// 控件容器字体大小 (默认 '28rpx')
					fontSize: '28rpx',
					// 控件容器图层层级 (默认 999999)
					zIndex: 999999,
					// 扫码成功回调
					success: (e) => {
						const str = e.result;
						// 使用正则表达式匹配编号后面的内容
						const match = str.match(/编号：(\d+)/);
						let userId = ''
						if (match) {
							userId = match[1]; // 提取匹配的第一组内容
						} else {
							uni.showToast({
								title: '未匹配到数据，请联系工作人员！'
							})
							return
						}
						// 网络请求
						uni.showLoading({
							title: '请求中',
						});
						// 类型 1 签到扫码 2 分论坛扫码 3 公开课扫码
						let api = `https://dy.btvs.cn/api/basic/guest/status/1/${userId}`
						// if (this.loginType == '2') {
						// 	api = `https://dy.btvs.cn/api/basic/forumScan/scan/${userId}/${this.scanType}`
						// }
						// if (this.loginType == '3') {
						// 	api =
						// 		`https://dy.btvs.cn/api/basic/openClassScan/scan/${userId}/${this.scanType}`
						// }
						uni.request({
							url: api,
							method: 'PUT',
							dataType: 'json',
							header: {
								Authorization: uni.getStorageSync('token')
							},
							success: (res) => {
								uni.hideLoading();
								if (res.data.code == 200) {
									uni.showToast({
										title: '签到成功',
										icon: "success"
									})
									if (this.loginType == '1') {
										uni.navigateTo({
											url: '/pages/userInfo/userInfo?uId=' + userId
										})
									}

								} else if (res.data.code == 5003) {
									// 错误码 5003 该二维码已签到
									// uni.navigateTo({
									// 	url: '/pages/noCode/index'
									// })
									uni.showToast({
										title: '已签到',
										icon: "none"
									})
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: "error"
									})
									if (res.data.code == 401) {
										setTimeout(() => {
											uni.navigateTo({
												url: '/pages/hwLogin/index'
											})
										}, 1500)
									}
								}
							},
							fail: () => {
								uni.hideLoading();
								uni.showToast({
									title: '网络开小差了哦',
									icon: "error"
								})
							},
						});
					},
					// 扫码失败回调
					fail: (e) => {
						uni.showToast({
							title: e
						})
					},
					// 扫码完成回调
					complete: (e) => {},
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		background: url('../../static/form_bg3.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;


		.form-content-wrap {
			width: 100%;
			height: 100%;
			// background: url('../../static/form_bg.png');
			// background-size: 85% auto;
			// background-repeat: no-repeat;
			// background-position: center;



			.content-box {
				width: 100%;
				height: 100%;
				// background: url('../../static/wl_bg.png');
				// background-size: 100% 100%;
				// background-repeat: no-repeat;
				// background-position: center;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
			}

			.form-title {
				margin-top: 16px;
				margin-bottom: 8px;
				padding-left: 34rpx;
				font-size: 14px;
				font-weight: 600;
				text-align: left;
				color: #e4aa84;
			}

			.form-content {
				width: 80%;
				padding: 160rpx 80rpx 80rpx 80rpx;
				margin: 0 auto;
				position: relative;

				.good-house-icon {
					position: absolute;
					width: 260rpx;
					right: -80rpx;
					bottom: -100rpx;
				}

				.tv-icon {
					position: absolute;
					width: 200rpx;
					left: -70rpx;
					bottom: -80rpx;
				}
			}

			.form-content .form-item,
			.form-content .code,
			.form-content .verify {
				height: 50px;
				line-height: 50px;
				border: 0;
				background-image: url('/static/input_bg.png');
				background-size: 100% 100%;
			}



			.form-content .code input,
			.form-content .verify input {
				height: 50px;
				line-height: 50px;
				padding: 0 36rpx;

			}



			.form-content .form-item ::v-deep .input-placeholder,
			.form-content .form-item ::v-deep .uni-input-input {
				padding: 0 36rpx;
				font-size: 30rpx;
				text-align: left;
			}

			.form-content .form-item ::v-deep .input-placeholder,
			.form-content .code input ::v-deep .input-placeholder,
			.form-content .verify input ::v-deep .input-placeholder {
				font-size: 30rpx;
			}

			.form-content .code input,
			.form-content .verify input {
				width: 63%;
				text-align: left;
			}



			.form-content .code .verify-submit {
				padding: 0;
				height: 28px;
				line-height: 28px;
				top: 11px;
				right: 36rpx;
				background-color: transparent;
				color: #e4aa84;
			}

			.form-content .verify-submit:after {
				border: none;
				background-color: transparent;
			}

			.submit-box {
				margin-top: 160rpx;
				text-align: center;

				.submit-login {
					width: 240rpx;
					margin: 0 auto;
				}
			}

		}
		.menu-box {
			width: 100%;
			margin: 60rpx auto;
			
		
			.m-row {
				padding: 24rpx 34rpx;
				// background-color: #fff;
				// border-radius: 30rpx;
				background-image: url('/static/input_bg.png');
				background-size: 100% 100%;
			}
			.menu-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				font-size: 32rpx;
				font-weight: 600;
				color: #230d61;
					
				.menu-icon {
					height: 66rpx;
					
				}
			}
		}
	}
</style>